<template>
	<view class="add">
		<view class="content">
			<view class="top">
				<image style="background-color: #FFFFFF;border-radius: 999rem;" :src="cardimgurl" mode=""></image>
				<view class="name">
					{{type == 0?'中国石化':'中国石油'}}
				</view>
				<view class="what">
					加油卡
				</view>
			</view>
			<view class="box">
				<view class="name">
					油卡卡号
				</view>
				<u--input placeholder="请输入油卡卡号" border="none" v-model="card"></u--input>
			</view>
		</view>
		<view class="big_box">
			<view class="login_Box_protocol_contract">
				<view @click="contract = !contract" class="login_Box_protocol_contract_left">
					<view v-show="contract" class="login_Box_protocol_contract_left_bar">
					</view>
				</view>
				<view class="login_Box_protocol_contract_right">
					已阅读并同意《服务协议》
				</view>
			</view>

			<u-button @click="add()" class="login_Box_content_cont_button" text="添加"></u-button>
		</view>

	</view>
</template>

<script>
	import {
		addoilcard
	} from '@/api/oilcard'
	export default {
		data() {
			return {
				type: 0,
				card: '',
				contract: false,
				cardimgurl:'../../../static/tabsIcon/shiyou.png',
			}
		},
		onLoad(option) {
			this.type = option.type;
			console.log(this.type);
			if(this.type == 0){
				this.cardimgurl = '../../../static/tabsIcon/shihua.png';
			}else{
				this.cardimgurl = '../../../static/tabsIcon/shiyou.png';
			}
		},
		methods: {
			add() {
				if (!this.contract) {
					uni.showToast({
						icon: 'none',
						title: '请先阅读并同意《服务协议》'
					})
					return
				}
				if (!this.card) {
					uni.showToast({
						icon: 'none',
						title: '请输入油卡卡号'
					})
					return
				}
				if (this.card.length < 16 || this.card.length >19) {
					console.log()
					uni.showToast({
						icon: 'none',
						title: '请输入正确油卡卡号'
					})
					return
				}
				if (this.card.length > 16 && this.card.length <19) {
					console.log()
					uni.showToast({
						icon: 'none',
						title: '请输入正确油卡卡号'
					})
					return
				}
				if (this.card.length == 16 && this.type == 0) {
					console.log()
					uni.showToast({
						icon: 'none',
						title: '请输入中国石化油卡卡号'
					})
					return
				}
				if (this.card.length == 19 && this.type == 1) {
					uni.showToast({
						icon: 'none',
						title: '请输入中国石油油卡卡号'
					})
					return
				}
				let data = {
					type: this.type,
					oilCardNumber: this.card
				}
				addoilcard(data).then(res => {
					if (res.success == 1) {
						uni.showToast({
							title: '添加成功',
							icon:'success',
							duration: 2000
						});
						uni.navigateBack();
					}
					else{
						uni.showToast({
							title: '添加失败',
							icon:'none',
							duration: 2000
						});
					}
				}).catch(res => {
					console.log(res)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #e7e9ec;
	}

	.add {
		width: 100%;
	}

	.content {
		background: #e7962d;
		border-radius: 30rpx;
		overflow: hidden;
		margin-top: 40rpx;


		.top {
			padding: 30rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			margin-bottom: 70rpx;

			image {
				width: 60rpx;
				height: 60rpx;
				margin-right: 25rpx;
				background: #FFF;
				// border-radius: 50%;
			}

			.name {
				font-weight: bold;
			}

			.what {
				font-size: 32rpx;
				margin-left: 30rpx;
			}
		}

		.box {
			width: 100%;
			background: #FFFFFF;
			padding: 40rpx 20rpx;
			display: flex;
			align-items: center;
			border-radius: 20rpx;

			.name {
				width: 25%;
				color: rgba(0, 0, 0, 0.9);
				font-size: 34rpx;
			}

			.right {
				width: 73%;
			}
		}
	}

	.big_box {
		padding: 50rpx 20rpx;
	}


	.login_Box_protocol_contract {
		margin-top: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.login_Box_protocol_contract_mack {
			position: absolute;
			bottom: -16upx;
			transform: translateY(100%);
			left: -30upx;
			padding: 20upx 30upx;
			border-radius: 20upx;
			background-color: rgba(0, 0, 0, 0.61);
			font-size: 34upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.8);
			line-height: 44upx;

			.login_Box_protocol_contract_mack_arrow {
				position: absolute;
				border: 10upx solid rgba(0, 0, 0, 0.61);
				top: 0;
				transform: translateY(-100%);
				left: 30upx;
				border-top-color: rgba(0, 0, 0, 0);
				border-left-color: rgba(0, 0, 0, 0);
				border-right-color: rgba(0, 0, 0, 0);
			}
		}

		.login_Box_protocol_contract_left {
			display: flex;
			justify-content: center;
			align-items: center;
			border: 2upx solid #000;
			border-radius: 100%;
			width: 28upx;
			height: 28upx;
			position: relative;

			.login_Box_protocol_contract_left_bar {
				width: 16upx;
				height: 16upx;
				// position: absolute;
				// top: 50%;
				// left: 50%;
				// transform: translate(-50% , -50%);
				background-color: #FF731E;
				border-radius: 100%;
			}
		}

		.login_Box_protocol_contract_right {
			margin-left: 18upx;
			width: calc(100% - 18upx - 28upx - 2upx);
			font-size: 24upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.9);
			line-height: 34upx;
		}
	}

	.login_Box_content_cont_button {
		margin-top: 60upx;
		height: 102upx;
		background: #FC8301;
		border-radius: 20upx;
		z-index: 23;
		background: #f6ac5d;
		justify-content: center;
		align-items: center;
		border: none;
		display: flex;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 0.8);
		line-height: 102upx;
	}
</style>
